@import "@automattic/onboarding/styles/mixins";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

$gray-100: #101517;
$gray-60: #50575e;
$gray-50: #646970;
$breakpoint-mobile: 660px;

.step-route.user {
	.form-fieldset {
		margin-bottom: 8px;
	}

	.locale-suggestions {
		margin: 0 auto;
	}

	.signup-form-social-first__tos-link,
	.signup-form-social-first__email-tos-link {
		color: var(--studio-gray-60, #646970);
		font-family: "SF Pro Text", sans-serif;
		font-size: 0.875rem;
		font-style: normal;
		font-weight: 400;
		line-height: 20px;

		a {
			color: var(--studio-gray-60, #646970);
			text-decoration-line: underline;
		}
	}

	.signup-form-social-first__tos-link {
		margin-bottom: 2rem;
		text-align: center;
	}

	.signup-form-social-first-email {
		.card {
			background: transparent;
			box-shadow: none;
			padding-left: 0;
			padding-right: 0;
		}
	}

	.dashboard-notice {
		margin-bottom: 2rem;
	}
}

.step-route.user:not(:has(.step-container-v2--user)) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 96px);
	margin: 20px 0;

	.locale-suggestions {
		@include break-medium {
			width: 100%;
		}
	}

	.formatted-header__title {
		@include onboarding-font-recoleta;
		color: $gray-100;
		margin-top: 0;
		font-size: 2.25rem;

		@include break-xlarge {
			font-size: 2.75rem;
		}
	}

	.formatted-header__subtitle {
		color: $gray-60;
		font-size: 1rem;
		margin-bottom: 0;
	}

	a.step-wrapper__navigation-link {
		color: #1d2327;
		font-family: "SF Pro Text", sans-serif;
		font-size: 0.875rem;
		font-style: normal;
		font-weight: 500;
		line-height: 20px;
		text-underline-offset: 5px;
		margin-left: auto;
	}

	// Hide the back button in the user step.
	// This is unfortunate as it works perfectly, but it classes with the flow title.
	button.navigation-link {
		display: none;
	}

	.signup-header .wordpress-logo {
		position: absolute;
		inset-inline-start: 20px;
		inset-block-start: 20px;
		fill: var(--color-text);
		transform-origin: 0 0;
	}

	.signup-form-social-first {
		width: 327px;
		margin: 3rem auto 0 auto;

		.signup-form__notice {
			width: 327px;
			margin-left: 0;
			margin-right: 0;

			&.is-transparent-info {
				color: var(--studio-gray-80, #2c3338);
			}
		}

		.auth-form__social {
			padding: 0 !important;
		}
	}

	.signup-form-social-first-email {
		.card {
			button:not(.is-borderless, .signup-form__domain-suggestion-confirmation) {
				display: block;
				max-width: 327px;
				margin: 0 auto;
			}

			button.signup-form__domain-suggestion-confirmation {
				color: var(--color-link);
				cursor: pointer;
				text-decoration: none;

				&:hover {
					color: var(--color-link-dark);
				}
			}

			button.is-borderless {
				color: var(--color-link);
				padding: 0;

				&:hover {
					color: var(--color-link-dark);
				}
			}
		}

		.form-label {
			color: var(--studio-gray-60, #50575e);
			font-family: "SF Pro Text", sans-serif;
			font-size: 0.875rem;
			font-style: normal;
			font-weight: 500;
			line-height: 20px;
		}

		.logged-out-form__footer {
			margin-top: 12px;
			padding-top: 0;
		}

		button.back-button {
			color: #1d2327;
			text-align: center;
			font-family: "SF Pro Text", sans-serif;
			font-size: 0.875rem;
			font-style: normal;
			font-weight: 500;
			line-height: 20px;
			display: block;
			margin: 0 auto;
			text-underline-offset: 5px;

			&:hover {
				color: var(--color-accent, #3858e9);
			}

			&:focus {
				outline: 1px dashed var(--color-accent, #3858e9);
				outline-offset: 3px;
				box-shadow: none;
				border-radius: 0;
			}
		}

		button.button:not(.is-borderless) {
			border-radius: 4px;

			&:focus {
				box-shadow: none;
				outline: 2px solid var(--studio-blue-60, #055d9c);
				outline-offset: 1px;
			}
		}
	}
}

.step-container-v2:has(.step-container-v2--user) {
	.locale-suggestions {
		margin: 0;
		width: 100%;
		max-width: 100%;

		@include break-small {
			margin: 0 auto;
			max-width: 500px;
		}

		.calypso-notice {
			margin-bottom: 0;
		}
	}

	.signup-form-social-first {

		&,
		.card.auth-form__social,
		.card.logged-out-form {
			width: 100%;
			max-width: 100%;
			padding: 0;
			margin: 0;
		}

		.card.logged-out-form__footer {
			margin: 24px 0 0 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;

			&::after {
				display: none;
			}
		}
	}

	.signup-form-social-first__tos-link,
	.signup-form-social-first__email-tos-link {
		text-align: left;

		@include break-small {
			text-align: center;
		}
	}

	.signup-form-social-first__email-tos-link {
		margin-top: 3rem;
	}
}
